<template>
  <div id="swiperTop">
    <van-swipe :autoplay="300" >
      <van-swipe-item v-for="image in state.images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import axios from "axios";
import { reactive, onMounted } from "vue";
export default {
    setup() {
    const state = reactive({
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
      ],
    });
    onMounted(()=>{
      axios.get('http://localhost:3000/banner?type=2').then((res)=>{
        console.log(res);
        state.images=res.data.banners
        console.log(state.images);
      })
    });
    return { state };
  },
};
</script>

<!-- <style lang="less">
#swiperTop {
  .van-swipe {
    width: 100%;
    padding: 0.2rem;
    .van-swipe__track {
      .van-swipe-item {
        img {
          width: 100%;
          height: 3rem;
        }
      }
    }
  }
}
</style> -->
<style lang="less">
#swiperTop {
  .van-swipe {
    width: 100%;
    height: 3rem;
    .van-swipe-item {
      padding: 0 0.2rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    }
    .van-swipe__indicator--active {
      background-color: rgb(219, 130, 130);
    }
  }
}
</style>